<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../../css/lib/bulma-v0.6.2/css/bulma.css" />
		<link rel="stylesheet" type="text/css" href="../../../bulma/css/bulma-docs.css" />
		<style type="text/css">
			.demo-item {
				display: inline-block;
				background-color: #00d1b2;
				color: #FFFFFF;
				min-width: 10rem;
				max-width: 30rem;
				margin-left: 1rem;
				margin-bottom: 1rem;
			}
			
			.demo-item .title {
				color: #FFFFFF;
			}
			
			.demo-item .tag {
				margin-left: 1rem;
				min-width: 4rem;
			}
		</style>
	</head>

	<body>
		<section class="hero is-primary">
			<div class="hero-body">
				<div class="container">
					<h1 class="title" id="title"></h1>
					<h2 class="subtitle">
						<span>作者:<span id="author"></span></span>
						<span>邮箱:<a class="is-link" id="email"></a></span>
					</h2>
				</div>
			</div>
		</section>
		<section class="section" style="background-color: forestgreen;">
			<div class="container is-fluid" id="demo-container"></div>
		</section>
		<script type="text/javascript">
			var title, author, email, demoContainer;
			var id = 1;
			const getDOM = () => {
				var str = '<div class="box is-4 is-primary demo-item">' +
					'<p class="title"></p>' +
					'<div class="tag-list">' +
					'<b>标签:</b>' +
					'</div>' +
					'<ul>' +
					'<li><b>编号:</b><span class="id"></span></li>' +
					'<li><b>创建时间:</b><span class="creae-time"></li>' +
					'<li><b>最近修改时间:</b><span class="last-modified-time"></li>' +
					'<li><b>路径:</b><span class="path"></span>' +
					'<a target="_blank" href="#" class="button is-small path-link">打开</a>' +
					'</li>' +
					'</ul>' +
					'<b>描述：</b>' +
					'<div class="content desc">' +
					'</div>' +
					'</div>';
				var t = document.createElement('div');
				t.innerHTML = str;
				var dom = t.children[0];
				return dom;
			}
			const getData = () => {
				var xhr = new XMLHttpRequest();
				var reqUrl = 'list.json';
				xhr.open('GET', reqUrl, true);
				xhr.setRequestHeader('Content-Type', 'Application/json');
				xhr.send();
				xhr.onload = function(event) {
					var data = JSON.parse(xhr.responseText);
					setData(data);
				}
			};
			const setData = data => {
				document.title = data.title;
				title.innerText = data.title;
				author.innerText = data.author;
				email.innerText = data.email;
				email.setAttribute('href', 'mailto:' + data.email);
				var samples = data.samples;
				samples.forEach(item => {
					var dom = getDOM();
					dom.querySelector('.title').innerText = item.title;
					dom.querySelector('.id').innerText = id;
					id += 1;
					dom.querySelector('.creae-time').innerText = item.createTime;
					dom.querySelector('.last-modified-time').innerText = item.lastModifiedTime;
					dom.querySelector('.path').innerText = item.path;
					dom.querySelector('.path-link').setAttribute('href', item.path);
					dom.querySelector('.desc').innerText = item.desc;
					var tagList = dom.querySelector('.tag-list');
					var tagArr = item.tags.split(',');
					tagArr.forEach(tagText => {
						var template = '<span class="tag is-link"></span>';
						var tmp = document.createElement('div');
						tmp.innerHTML = template;
						var tag = tmp.children[0];
						tag.innerHTML = tagText;
						tagList.appendChild(tag);
					})
					demoContainer.appendChild(dom);
				})
			};
			window.onload = () => {
				title = document.querySelector('#title');
				author = document.querySelector('#author');
				email = document.querySelector('#email');
				demoContainer = document.querySelector('#demo-container');
				getData();
			}
		</script>
	</body>

</html>